<template>
	<div>
		<div id="node-select">
			<!-- 拖动条区域 -->
			<div id="n-slider" class="col-md-10">
				<!-- 遍历节点 -->
				<div class="disable-select node" v-for="(item,index) in node" :style="{left:item.nodePx+'px'}">{{index+1}}</div>
			</div>

			<div class="col-md-2 add-node disable-select" @click.prevent="add">
				<i class="fa fa-plus-circle" aria-hidden="true"></i>添加节点
			</div>
		</div>

		<div class="position-show disable-select">
	        <p style="margin-top:15px;">可左右拖动进度条调整弹窗出现的位置。</p>
	        <span>提示位置：</span>
	        <span class="tip-position" v-for="(item,index) in node">
	        	<b class="tip-num">{{index+1}}</b>：<b class="tip-posi">{{item.nodeNum}}%</b><b class="tip-del" @click="del(index)">删除</b>
	        </span>
	    </div>
    </div>
</template>
<script>
export default {
	name: 'SetNode',
	data() {
		return {
			parentW  :'',  //拖动条长度（动态获取）
			node     :this.nodeInfo,  //存储父组件传递过来的节点信息，最后转换成百分比传回父组件
		}
	},
	props:{
		// 默认节点信息
		nodeInfo:{
			type:Array, 
			// default:[{"nodeIndex":1,"nodeNum":49}]
		}
	},
	methods: {
		// 删除节点
		del (position){
			let num = this.node.length;
			if(num<=1){
				 this.$message.warning('至少保留一个节点！');
			}else{
				this.node.splice(position,1)
			}
		},
		// 添加节点
		add (){
			let num = this.node.length;
			//超过5个节点禁止添加
			if (num >= 5){
				this.$message.warning('最多添加5个节点！');
			}else{
				let nodePx = Math.round(this.parentW*(49/100))-17;
				this.node.push({"nodeIndex":num+1,"nodeNum":49,"nodePx":nodePx})
			}
		}
	},
	watch:{
		// 修改节点后，同步修改父组件中记录节点的信息
		node:{
			handler(newVal,oldVal){
				let newNode = newVal.forEach((item,n)=>{
					item.nodeIndex = n+1;
				})
				this.$emit("update:nodeInfo",newVal);
			},
			deep:true
		}
	},
	mounted() {
		let _self = this;
		
		//节点拖动相关操作
		var x =0, x2 = 0;
		var parentWidth = $('#n-slider').outerWidth(); //拖动条长度
		this.parentW = parentWidth;
		var selfWidth = $('.node').outerWidth(); //节点宽度
		var startX = Math.ceil(parentWidth * 0.05) - 17; //计算开始临界点
		var endX = Math.ceil(parentWidth * 0.95) - 17; //+17是为了让节点中间与临界点对齐

		// 对默认传递的node信息做处理，将位置处理成px
		this.node.map((item,n)=>{
			this.$set(item,'nodePx',Math.round(parentWidth*(item.nodeNum/100))-17)
		});
		this.$forceUpdate();
		

		$("#n-slider").on('mousedown', '.node', function(e) {
			var $this = $(this);
			var nodeNumber = parseInt($(this).html()); //获取当前拖动节点的标识
			var offset = $(this).position(); //DIV在页面的位置 
			x = e.pageX - offset.left; //获得鼠标指针离DIV元素左边界的距离 
			$(this).addClass('node-active'); //提高拖动节点的层级

			//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件 
			$(document).bind("mousemove", function(ev) {
				//获得X轴方向移动的值 
				x2 = ev.pageX - x;
	
				// 临界点判断
				x2 = x2 < startX ? startX : (x2 > endX) ? endX : x2;
				$this.css({ left: x2 + "px" });

				// 计算节点位置百分比，重写底部信息
				var p = parseInt(((parseInt($this.css("left")) + 17) / parentWidth) * 100);
				let obj = {'nodeIndex':nodeNumber,'nodeNum':p,'nodePx':x2};
			
				_self.node.splice(parseInt(nodeNumber-1),1,obj)

				$(".tip-num").each(function() {
					var i = parseInt($(this).html());
					if (i == nodeNumber) {
						$(this).next('.tip-posi').addClass('zoom-big');

					}
				})
			});
		});

		$(document).mouseup(function() {
			// 移出底部信息放大动画类
			$('.tip-posi').removeClass('zoom-big');
			// 移出拖动节点提升层级类
			$(".node").removeClass('node-active');
			// 事件解绑
			$(this).unbind("mousemove");
		})

	}
}

</script>
<style lang="less">
/* 视频时间节点选择滑动条 Start*/

#node-select {
	position: relative;
	height: 18px;
	#n-slider {
		position: relative;
		height: 18px;
		border-radius: 4px;
		border: 1px solid #D3D3D3;
		box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
		background: #FAFAFA;
	}
	.add-node {
		height: 18px;
		line-height: 18px;
		color: #5C9ACF;
		cursor: pointer;
	}
	.add-node>i {
		color: #5C9ACF;
		margin: 0 5px;
	}
	.node {
		position: absolute;
		z-index: 1;
		width: 34px;
		height: 28px;
		line-height: 28px;
		top: -6px;
		text-align: center;
		border: 1px solid #D9D9D9;
		border-radius: 3px;
		background: #FFF;
		cursor: default;
		box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
	}
	.node-active {
		z-index: 2;
	}
	.node:active {
		box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
	}
	.position-show {
		width: 100%;
	}
	.disable-select {
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}
	.tip-position {
		margin-right: 10px;
	}
	.tip-position b {
		font-weight: normal;
	}
	.tip-position .tip-num {
		font-weight: bold;
	}
	.tip-position b.tip-del {
		color: #5C9ACF;
		font-size: 12px;
		margin-left: 5px;
		margin-right: 18px;
		cursor: pointer;
	}
	.default-node {
		left: 49%;
	}
	.tip-posi {
		display: inline-block;
		width: 40px;
		text-align: center;
		white-space: nowrap;
		transition: .3s all linear;
	}
	.tip-position .zoom-big {
		font-weight: bold;
		color: rgba(102, 189, 120, 1.0);
		transform: scale(1.25);
	}
	.slide-show {
		visibility: visible;
		height: auto;
	}
	.slide-hide {
		visibility: hidden;
		overflow: hidden;
		height: 0;
	}
}
/* 视频时间节点选择滑动条 End*/
.position-show {
	width: 100%;
}
.tip-position {
    margin-right: 10px;
}
.tip-position .zoom-big{
  font-weight: bold;
  color:rgba(102, 189, 120, 1.0);
     transform:scale(1.25);
}
.tip-position b {
    font-weight: normal;
}
.tip-position .tip-num {
    font-weight: bold;
}
.tip-posi {
    display: inline-block;
    width: 40px;
    text-align: center;
    white-space: nowrap;
    -webkit-transition: .3s all linear;
    -o-transition: .3s all linear;
    transition: .3s all linear;
}
.tip-position b.tip-del {
    color: #5C9ACF;
    font-size: 12px;
    margin-left: 5px;
    margin-right: 18px;
    cursor: pointer;
}

</style>
